<template>
  <div>
        <header class="header">
        <div class="head">
            <figure><i class="iconfont icon-icon"></i></figure>
            <figure>我的</figure>
            <figure></figure>
        </div>
        <div class="mnurt">
            <figure>
              <img src="../assets/images/tou.png"  alt="">
            </figure>
            <div class="delu">
                 <figure><h3>登录/注册</h3></figure> 
                 <figure><p><i class="iconfont icon-shouji"></i>登录后享受更多特权</p></figure>             
            </div>
            <div class="img">
                <p>></p>
            </div>
        </div>
        </header> 
        <main class="main">
            <div>
                <dl>
                  <dt>
                    <i class="iconfont icon-hongbao"></i>    
                    <dd>红包</dd>
                  </dt>
                </dl>
            </div>
            <div>
                <dl>
                  <dt>
                    <i class="iconfont icon-jinbi" style="background:#61C620;"></i>    
                    <dd>金币</dd>
                  </dt>
                </dl>
            </div>
        </main>
        <div class="dzhr">
            <figure>
                <i class="iconfont icon-weizhi"></i>
                  我的地址
            </figure>
            <figure>
                  <i class="iconfont icon-arrow-right"></i>
            </figure>
        </div>
            <div class="list">
              <div class="first">
                    <figure>
                        <i class="iconfont icon-bao"></i>
                          金币商城
                    </figure>
                    <figure>
                          <i class="iconfont icon-arrow-right"></i>
                    </figure>
              </div>
              <div class="first">
                    <figure>
                        <i class="iconfont icon-liwu"></i>
                          分享拿五元现金
                    </figure>
                    <figure>
                          <i class="iconfont icon-arrow-right"></i>
                    </figure>
              </div>
            </div>

            <div class="list">
              <div class="first">
                    <figure>
                        <i class="iconfont icon-erji"></i>
                          我的客服
                    </figure>
                    <figure>
                          <i class="iconfont icon-arrow-right"></i>
                    </figure>
              </div>
              <div class="first">
                    <figure>
                        <i class="iconfont icon-xiangqingyexiazai24"></i>
                          下载饿了么App
                    </figure>
                    <figure>
                          <i class="iconfont icon-arrow-right"></i>
                    </figure>
              </div>
            </div>
        
  </div>
</template>

<script>

export default {

}
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
  .header{
      padding-bottom:2%;
     background:#009FFF;
.head{
  
    
     display:flex;
     justify-content:space-between;
  figure{
     .pxToRem(font-size,30);
     color:#fff;
     margin:4%;
     .iconfont{
         .pxToRem(font-size,30);
       }
      }
    }

    .mnurt{
      display:flex;
      margin:3%;
      figure{
        width:20%;
        img{
          width:100%;        
        }
      }
    }
    .delu{
      width:45%;
      display:flex;
      flex-direction:column;
      padding:2%;
      figure{
        width:100%;
        flex:1;
        h3{
             .pxToRem(font-size,40);
             color:#fff;
             font-weight:bold;
        }
        p{
                 .pxToRem(font-size,20);
                 color:#fff;
         }
         i{
          padding:1%;
         }
      }
    }
    .img{
      width:30%;
      color:#fff;
      p{
         .pxToRem(line-height,150);
         float:right;
         .pxToRem(font-size,30);
      }
    }
  }
  .main{
      display:flex;

      div{
        flex:1;
        border:1px solid #ccc;
        dl{
          text-align:center;
          padding:10%;
          background:#fff;
          dt{
            .iconfont{
                padding:5%;
                background:#E46658;
                border-radius:50%;
                color:#fff;
                .pxToRem(font-size,40);
            }
          }
          dd{
            padding-top:10%;
          }
        }
      }
  }
  .dzhr{
      display:flex;
     .pxToRem(margin-top,40);
     background:#fff;
     justify-content:space-between;
     padding:3%;
     figure{
           .pxToRem(font-size,30);
      i{
         .pxToRem(font-size,40);
          color:#55A4E5;
      }
     }

  }
    .list{

  .pxToRem(margin-top,40);
   .first{
      display:flex;
      border-bottom:1px solid #ccc;
     background:#fff;
     justify-content:space-between;
     padding:3%;
     figure{
           .pxToRem(font-size,30);
      i{
         .pxToRem(font-size,40);
         color:#90D94D;
      }
     }

  }
}
</style>
